<template>
    <div>
        <div id="main"></div>
        <!-- <div id="maychar"></div> -->
    </div>
</template>
<script lang="js">
import { defineComponent, inject, onMounted } from "vue";
import required from '@/utils/request'
import { ElMessage } from 'element-plus'

export default defineComponent({
    setup() {
        onMounted(() => {
            change();
            // changetype();
        });
        let echarts = inject("echarts"); // 主要
        // 基本柱形图
        const change = async () => {
            const chartBox = echarts.init(document.getElementById("main")); // 主要
            const res = await required.get('/sys/user/getCountBySex');
            if (res.data.code === 200) {
                const option = {
                    series: [
                        {
                            type: "pie",
                            data: res.data.data,
                        },
                    ],
                };
                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                });
            } else {
                ElMessage.error(res.data.msg);
            }
        };
        // 折线图
        // const changetype = () => {
        //     // 获取组件实例
        //     const machart = echarts.init(document.getElementById("maychar"));
        //     // 设置配置项
        //     const option = {
        //         xAxis: {
        //             data: ["A", "B", "C", "D", "E"],
        //         },
        //         yAxis: {},
        //         series: [
        //             {
        //                 data: [10, 22, 28, 43, 49],
        //                 type: "line",
        //                 stack: "x",
        //             },
        //             {
        //                 data: [5, 4, 3, 5, 10],
        //                 type: "line",
        //                 stack: "x",
        //             },
        //         ],
        //     };
        //     // 复制
        //     machart.setOption(option);
        //     // 根据页面大小自动响应图表大小
        //     window.addEventListener("resize", function () {
        //         machart.resize();
        //     });
        // };
        return {
            // changetype,
            change,
        };
    },
});

</script>

<style lang="scss" scoped>
#main {
    width: 550px;
    height: 350px;
}
</style>